<template>
	<div style="background-color: white;overflow: hidden;">
		<h2 class="title">错题本</h2>
		<div style="display: flex;justify-content: space-between;font-size:1.0625rem;color: #676767;padding: 1.25rem;">
			<div>错题标签</div>
			<div>共有错题：<span style="color: #ffaa00;">{{allnumber}}</span></div>
		</div>
		<div class="tabs">
			<div class="item-tab" @click="getWrongQuestionRecords(Item.value,Item.label)" v-for="(Item,index) in WrongQuestionKnowledge"
			 :key="index" :class="{active:isActive===Item.label}">
				{{
				Item.label
			  }}
			</div>

		</div>
		<div style="overflow: scroll;height: 31.25rem;overflow-x: hidden;">


			<div style="padding: 1.25rem;" v-for="(Item,index) in QuestionRecords" :key="Item.id">
				<div class="qsTit">
					{{index+1}}:
					<div v-html="`${md(Item.question.content)}`"></div>
				</div>
				<div style="display: flex;justify-content: space-between;font-size: 14px;
    font-weight: 400;
    color: #999;"><span
					 v-for="ite in Item.knowledgeList">{{ite.label}}</span><span>{{Item.testPaperName}}-<span v-for="ite in Item.knowledgeList">{{ite.label}}</span></span></div>
				<el-divider></el-divider>
			</div>
		</div>


	</div>
</template>

<script>
	import marked from "marked";
	import {
		PersonManager
	} from "../../../request/personCenter.js"
	import {
		TestManager
	} from "../../../request/test.js"
	export default {
		data() {
			return {
				WrongQuestionKnowledge: [],
				knowledgeId: '',
				QuestionRecords: [],
				allnumber: ''
			}

		},
		created() {
			this.getWrongQuestionKnowledge();
			this.getWrongQuestionRecords("no");
		},
		methods: {
			//获取错题记录
			getWrongQuestionRecords(knowledgeId,label) {
				if (knowledgeId == "no") {
					var parmas = {
						currentPage: 1,
						pageSize: 100
					}
				} else {
					var parmas = {
						currentPage: 1,
						pageSize: 100,
						knowledgeId: knowledgeId
					}
				}

				TestManager.getWrongQuestionRecords(this.qs.stringify(parmas)).then(e => {
					console.log(e.data.data.dataList);
					this.QuestionRecords = e.data.data.dataList;
				    this.isActive=label;
					if (knowledgeId == "no") {
						this.allnumber = this.QuestionRecords.length;
					}
				})
			},
			//获取错题的知识点
			getWrongQuestionKnowledge() {
				TestManager.getWrongQuestionKnowledge().then(e => {
					console.log(e);
					this.WrongQuestionKnowledge = e.data.data;
				})
			},
			md(content) {
				return marked(content);
			},



		}
	}
</script>

<style scoped="scoped">
	

	.title {
		margin: 20px 20px 10px;
	}

	.tabs {
		width: 100%;
		position: relative;
		box-sizing: border-box;
		display: flex;
		flex-direction: row;
		padding: 8px 30px;
		margin-bottom: 1.25rem;
		background-color: white;
		flex-wrap: wrap;
	}

	.item-tab {
		margin-top: 10px;
		width: 150px;
		height: 36px;
		line-height: 36px;
		margin-right: 1.875rem;
		font-size: 12px;
		/* font-weight: 400; */
		color: #666;
		margin-right: 80 px;
		cursor: pointer;
		position: relative;
		border: 1px #e1e1e1 solid;
		border-radius: 10rem;
		text-align: center;
	}

	.qsTit {
		width: 100%;
		display: flex;
		margin-bottom: 30px;
	}

	/* 设置滚动条的样式 */
	::-webkit-scrollbar {
		width: 5px;
	}

	/* 滚动槽 */
	::-webkit-scrollbar-track {
		-webkit-box-shadow: inset006pxrgba(0, 0, 0, 0.3);
		border-radius: 5px;
	}

	/* 滚动条滑块 */
	::-webkit-scrollbar-thumb {
		border-radius: 10px;
		background: rgba(0, 0, 0, 0.1);
		-webkit-box-shadow: inset006pxrgba(0, 0, 0, 0.5);
	}

	::-webkit-scrollbar-thumb:window-inactive {
		background: rgba(236, 246, 255, 0.4);
	}
	.active {
		font-weight: 600;
		color: #03d3bd;
		border: 1px #03d3bd solid;
	}
</style>
